<template>
	<div>
		<el-select
			@visible-change="checkOne"
			size="mini"
			filterable
			v-if="showSelect"
			v-model="value2"
			ref="select-staff"
			placeholder="请选择运营人"
			@change="change"
		>
			<!-- <el-option label="全部运营人" value=""></el-option> -->
			<el-option
				:label="item.username"
				:value="item.id"
				v-for="(item, index) in list"
				:key="index"
			></el-option>
		</el-select>
		<div v-else>
			您未绑定运营人！
		</div>
		<div class="taps">
			* 解绑运营人：账号管理>推广位管理>编辑运营人为无
		</div>
	</div>
</template>
<script>
export default {
	props: ['value'],

	data() {
		return {
			value2: this.value,
			list: [],
			showSelect: true
		};
	},

	watch: {
		value(val) {
			this.value2 = val;
		}
	},

	mounted() {
		this.refresh();
	},

	methods: {
		async refresh(params) {
			this.list = await this.$service.account.extension.staffList({
				...params
			});
			if (this.list.length === 0) {
				this.showSelect = false;
			} else {
				this.showSelect = true;
			}
		},
		// 选中排第一
		checkOne(bool) {
			if (this.value2 == '') {
				return;
			}
			if (bool) {
				//  函数功能变更 由选中排序第一改为滑动至选中位置 延迟时间 20 数据越大 数值应该设置为越大 正常20即可
				this.list.forEach((item, index) => {
					if (item.id == this.value2) {
						setTimeout(() => {
							this.$nextTick(() => {
								this.$refs['select-staff'].$refs['scrollbar'].wrap.scrollTo({
									top: (index + 1) * 34,
									left: 0
								});
							});
						}, 20);
					}
				});
			}
		},
		change(val) {
			this.$emit('change', val);
			this.$emit('input', val);
		}
	}
};
</script>
<style lang="stylus" scoped>
.el-select {
	width 100%
}
.taps {
    font-size 12px
    color:#FF4400
}
</style>
